<template>
  <div class="overview_inverter">
    <div class="flex-container">
      <div class="flex-item box-realTime">
        <realTimeDisplay ref="realTimeDisplay"></realTimeDisplay>
      </div>
    </div>
    <div class="flex-container">
      <div class="flex-item box-sale-bar">
        <div class="title">
          {{$t('overview.gridPower')}}
          <span class="time-group">
            <button :class="{disabled:powerChartDate==currentDate}" @click="setDateVal(-1)"><i class="el-icon-arrow-left el-icon--left"></i></button>
            <el-date-picker
              v-model="powerChartDate"
              type="date"
              value-format="yyyy-MM-dd"
              @change="initPowerChart()"
              :clearable='false'
              :picker-options="pickerOptions"
              size="mini">
            </el-date-picker>
            <button :disabled="powerChartDate==currentDate" @click="setDateVal(1)"><i class="el-icon-arrow-right el-icon--right"></i></button>
          </span>
          
        </div>
        <div id="powerChart" :style="{width: '100%', height: '300px'}"></div>
      </div>

      <div class="flex-item box-power-bar">
        <div class="title clearfix">
          <span>{{$t('index.totalConsumption')}}</span>
        </div>
        <div class="btn-group2 right-box-radio clearfix"> 
          <div class="radio-wrap">
            <div :class="reportType==1?'active':''" @click="initYieldChart(chartType,1)">
              <span class="radio-box-modal"></span><font>{{$t('overview.daily')}}</font>：
            </div>
            <div class="btn-group">
              <span class="box-title" :class="{ active:isActive==1 }" @click.stop="toggleBox(1)">
                <span class="title-btn" id="day_menu">{{day}}</span><i class="el-icon-caret-bottom"></i>
              </span>

              <ul class="box-time" style="width:210px">
                <li class="title">{{$t('overview.daily')}}</li>
                <template v-for="count in dayList" >
                    <li :key="count">
                    <el-button 
                      type="text" 
                      :disabled="year==now_year&&month==now_month&&count>now_day" 
                      @click="day=count;isActive=0" 
                    >{{count}}
                    </el-button>
                  </li>
                </template>
              </ul>
            </div>
          </div>

          <div class="radio-wrap">
            <div :class="reportType==2?'active':''" @click="initYieldChart(chartType,2)">
              <span class="radio-box-modal"></span><font>{{$t('overview.month')}}</font>：
            </div>
            <div class="btn-group">
              <span class="box-title" :class="{ active:isActive==2 }" @click.stop="toggleBox(2)">
                <span class="title-btn" id="month_menu">{{month}}</span><i class="el-icon-caret-bottom"></i>
              </span>
              <ul class="box-time" colspan="6"  style="width:180px">
                <li class="title">{{$t('overview.month')}}</li>
                <template v-for="count in 12" >
                  <li :key="count">
                    <el-button 
                      type="text" 
                      :disabled="year==now_year&&count>now_month" 
                      @click="month=count;isActive=0" 
                    >{{count}}
                    </el-button>
                  </li>
                </template>
              </ul>
            </div>
          </div>

          <div class="radio-wrap">
            <div :class="reportType==3?'active':''" @click="initYieldChart(chartType,3)">
              <span class="radio-box-modal"></span><font>{{$t('overview.year')}}</font>：
            </div>
            <div class="btn-group">
              <span class="box-title" :class="{ active:isActive==3 }" @click.stop="toggleBox(3)">
                <span class="title-btn" id="year_menu">{{year}}</span><i class="el-icon-caret-bottom"></i>
              </span>
              <ul class="box-time" style="width:150px">
                <li class="title">{{$t('overview.year')}}</li>
                <template v-for="count in yearList">
                  <li class="grow" :key="count" @click="year=count;isActive=0">
                    <el-button 
                      type="text">
                      {{count}}
                    </el-button>
                  </li>
                </template>
              </ul>
            </div>
          </div>

          <div class="radio-wrap">
            <div :class="reportType==4?'active':''" @click="initYieldChart(chartType,4)"> 
              <span class="radio-box-modal"></span>{{$t('all')}}
            </div>
          </div>

        </div>
        <div class="wrap-chart">
          <div class="wrap-pie" :class="{active:chartType=='pie'}">
            <div echart id="yieldPieChart1">1</div>
            <div echart id="yieldPieChart2">2</div>
            <div class="info">{{$t('overview.currentYield')}}:<span class="value">{{pieYield}}</span></div>
            <div class="info">{{$t('overview.used')}}:<span class="value">{{pieConsumeEnergy}}</span></div>
          </div>
          <div class="wrap-bar" :class="{active:chartType=='bar'}">
            <div echart id="yieldBarChart" :style="{width: '100%', height: '300px'}"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '@/utils/index.js'
import realTimeDisplay from '../overview-inverter/real-time-display'
let echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/pie')

export default {
  props:{
    activeName:{
      type:String,
      default:()=>{
          return '1'
      }
    }
  },
  components:{
    realTimeDisplay
  },
  data(){
    return{
      timer:null,
      markers:[],
      userId:sessionStorage.getItem("selRow_userId")||'',
      siteId:sessionStorage.getItem('selRow_siteId')||'',
      wifiSn:sessionStorage.getItem('selRow_wifi_sn'),
      firmId:sessionStorage.getItem('selRow_firmId'),
      inverterSn:sessionStorage.getItem("selRow_inverter_sn"),
      inverterType:sessionStorage.getItem('selRow_inverterType'),
      epsStatus:sessionStorage.getItem("selRow_epsStatus"),
      userData:JSON.parse(sessionStorage.getItem('userObj')),
      isSunFlag:true,
      sunData:{startTime:'6:00AM',endTime:'6:00PM',sunAngle:0,weatherImg:''},
      
      yieldObj:{todayYield:0,monthYield:0,yearYield:0,totalYield:0,gridPower:0},
      electricity:{price:'',currency:''},//节约电费
      userPower:{},
      pvBattery:{
        pvPower:0,
        batteryPower:0,
        bmsCapation:0,
        bmsState:-1//默认电池状态未知-不显示
      },
      batteryStatusColor:'',
      powerChartDate:this.$options.filters['dateFormat'](new Date(),'YYYY-MM-DD'),

      chartType:'bar',
      reportType:'2',
      yeildType:'1',
      pieYield:0,
      pieConsumeEnergy:0,
      currentTime:this.$options.filters['dateFormat'](new Date()),
      currentDate:this.$options.filters['dateFormat'](new Date(),'YYYY-MM-DD'),
      day:this.$options.filters['dateFormat'](new Date(),'DD'),
      month:this.$options.filters['dateFormat'](new Date(),'MM'),
      year:this.$options.filters['dateFormat'](new Date(),'YYYY'),
      now_day:this.$options.filters['dateFormat'](new Date(),'DD'),
      now_month:this.$options.filters['dateFormat'](new Date(),'MM'),
      now_year:this.$options.filters['dateFormat'](new Date(),'YYYY'),
      yearList:[],
      isActive:0,
      powerChart:{},
      yieldPieChart1:{},
      yieldPieChart2:{},
      yieldBarChart:{},
      pickerOptions:{ //禁用今天之后的时间
          disabledDate(time) {
              return time.getTime() > Date.now()
          }
      },
      pvTypeCountData:{},
      batPower1Flag:'',
      batteryCapacityFlag:'',
      ifEPS:false,
    }
  },
  mounted(){
    if(!(localStorage.getItem('batPower1FlagInv')) && localStorage.getItem('batPower1FlagInv') !=='0'){
      localStorage.setItem('batPower1FlagInv','0')
    }
    if(!(localStorage.getItem('batteryCapacityFlagInv')) && localStorage.getItem('batteryCapacityFlagInv') !=='0'){
      localStorage.setItem('batteryCapacityFlagInv','0')
    }
    this.batPower1Flag = localStorage.getItem('batPower1FlagInv')
    this.batteryCapacityFlag = localStorage.getItem('batteryCapacityFlagInv')
    console.log(this.batPower1Flag,'this.batPower1Flag')
    console.log(this.batteryCapacityFlag,'this.batteryCapacityFlag')

    this.yearList=[]
    for(let i=2018;i<=this.year;i++){
      this.yearList.push(i);
    }
    this.powerChart = echarts.init(document.getElementById('powerChart'));
    this.yieldPieChart1 = echarts.init(document.getElementById('yieldPieChart1'));
    this.yieldPieChart2 = echarts.init(document.getElementById('yieldPieChart2'));
    this.yieldBarChart = echarts.init(document.getElementById('yieldBarChart'));

    this.getTypeModelBySN()

    window.addEventListener('resize', () => {
      this.powerChart.resize();
      this.yieldPieChart1.resize()
      this.yieldPieChart2.resize()
      this.yieldBarChart.resize()
    })
    document.addEventListener('click',this.toggleBox);
    this.getMap()

          console.log(this.firmId,'this.firmId')
      console.log(this.siteId,'this.siteId')
      console.log(this.userId,'this.userId')
  },
  destroyed(){
    document.removeEventListener('click',this.toggleBox);
  },
  computed: {
    dayList: function () {
      if(this.month==1||this.month==3||this.month==5||this.month==7||this.month==8||this.month==10||this.month==12) return 31;
      if(this.month==4||this.month==6||this.month==9||this.month==11) return 30;
      if(this.month==2&&this.year%4==0) return 29;
      if(this.month==2&&this.year%4!=0) return 28;
    }
  },
  watch:{
    day(){
      this.initYieldChart(this.chartType,this.reportType);
    },
    month(){
      this.day=1;
      this.initYieldChart(this.chartType,this.reportType);
    },
    year(){
      this.day=1;
      this.initYieldChart(this.chartType,this.reportType);
    }
  },
  methods:{
    initPage(){
      this.getTypeModelBySN()
      this.$refs["realTimeDisplay"].initPage()
    },
    async getTypeModelBySN(){
        let res=await this.API.getTypeModelBySN({
            inverterSN:this.inverterSn
        })
        console.log(res,'获取机型-inverter')
        this.ifEPS = res.battery == 1 && res.inverterType != 9 //X1/AC  不显示离网
        this.pvTypeCountData=res
        this.initPowerChart();//功率曲线
        this.initYieldChart(this.chartType,this.reportType);
    },
    refreshData(){
      this.initPowerChart();//功率曲线
      this.initYieldChart(this.chartType,this.reportType);
      this.$emit('uploadPage',true)
      this.$nextTick(()=>{
        this.$refs.realTimeDisplay.initPage()
      })
    },
    //切换时间
    setDateVal(append){
      this.powerChartDate=this.UtilsFun.setReportDate(this.powerChartDate,append);
      this.initPowerChart();
    },
    toggleBox(index){
      index=index!=0?index:0;
      if(index==0) console.log(index);
      if (this.isActive==index) {
        this.isActive=0;
      }else{
        this.isActive=index;
      }
    },
    forEachYield(res,i,xAxisData,yeildData,EPSData){
      let flag=true;
      res.forEach(item=>{
        if(item.time==i){
          xAxisData.push(item.time);
          
          if(item.yieldtoday!=null){
            if(item.yieldtoday<=0){
              yeildData.push(0.00);
            }else{
              yeildData.push(item.yieldtoday.toFixed(2));
            }
          }else{
            yeildData.push('-');
          }
          
          if(item.epsEnergy!=null){
						if(item.epsEnergy<=0){
							EPSData.push(0.00);
						}else{
							EPSData.push(item.epsEnergy.toFixed(2));
						}
					}else{
						EPSData.push('-');
          }
          flag=false;
        }
      })
      if (flag) {
				xAxisData.push(i);
				yeildData.push('-');
				EPSData.push('-');
			}
    },
    async getYeildyByInverter(){
      console.log(this.firmId,'this.firmId')
      console.log(this.siteId,'this.siteId')
      console.log(this.userId,'this.userId')
      let res=await this.API.getYeildyByInverter({
        inverterSn:this.inverterSn,
        firmId:this.firmId,
        siteId: this.siteId,
        currentTime:this.currentTime
      })
      this.yieldObj=res;
    },
    initYieldPie(chartObj,chartData){
      let option = {
          color:chartData.color,
            tooltip: {
                trigger: 'item',
                formatter: '{b} : {c}kWh'
            },
            legend: {
                left: 'center',
                bottom:5,
                icon: 'circle',
                itemGap:15,
                itemWidth:12,
                itemHeight:12,
                data: chartData.legend,
                textStyle: {
                    rich: {
                        value: {
                            fontSize: 12,
                            lineHeight: 12,
                            color: '#ff8920'
                        }
                    }
                }
            },
            series: [
                {
                    type: 'pie',
                    radius: ['30%', '50%'],
                    center: ['50%', '43%'],
                    hoverOffset:3,
                    label:{
                      normal: {
                        show: true,
                        formatter: (params)=>{
                                return params.percent+'%';
                            },
                        textStyle: {
                          fontSize: 15,
                        },
                        position: 'outside'
                      }
                    },
                    labelLine:{
                      show:false,
                      length:10,
                      length2:0
                    },
                    data: chartData.series,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
      chartObj.setOption(option, true);
    },
    //电量统计
    async initYieldChart(chartType,reportType){
      console.log(chartType);
      this.chartType=chartType;
      this.reportType=reportType;
      var dateTime='';
      let m = this.month>9?this.month:"0"+this.month;//获取当前月份的日期
      let d = this.day>9?this.day:"0"+this.day;
      if(this.reportType==1) dateTime=this.year+'-'+m+'-'+d
      if(this.reportType==2) dateTime=this.year+'-'+m
      if(this.reportType==3) dateTime=this.year

      if(this.chartType=='pie'){
        let data = await this.API.getAggYieldBySite({
          reportType : reportType,
          dateTime : dateTime,
          currentTime : this.currentDate,
          siteId: this.siteId
        })
        console.log(data);
        if(data){
          //yield发电量   feedinEnergy 并网电量    consumeEnergy耗电电量
          //自发自用=发电量-并网电量
          if(data.feedinEnergy > data.yield){
            data.feedinEnergy = data.yield
          }
          this.pieYield = data['yield']>1000?(data['yield']/1000).toFixed(2)+'MWh':data['yield'].toFixed(2)+'kWh'
          this.pieConsumeEnergy = data['consumeEnergy']>1000?(data['consumeEnergy']/1000).toFixed(2)+'MWh':data['consumeEnergy'].toFixed(2)+'kWh'
          var selfUser=data['yield']-data['feedinEnergy']>0?data['yield']-data['feedinEnergy']:0;
          var pieChartData={
              color:['#f4b600','#6da719'],
              legend:[this.$t('index.toGrid'),this.$t('index.directSelfUse')],
              series:[
                      {value: data['feedinEnergy'].toFixed(2), name: this.$t('index.toGrid')},
                      {value: selfUser.toFixed(2), name: this.$t('index.directSelfUse')},
                    ]
          };
          var pieChart2Data={
              color:['#eb6206','#6da719'],
              legend:[this.$t('index.powerConsumption'),this.$t('index.directSelfUse')],
              series:[
                      {value: data['consumeEnergy'].toFixed(2), name: this.$t('index.powerConsumption')},
                      {value: selfUser.toFixed(2), name: this.$t('index.directSelfUse')},
                    ]
          };
          this.initYieldPie(this.yieldPieChart1,pieChartData)
          this.initYieldPie(this.yieldPieChart2,pieChart2Data);
        }
      }else if(this.chartType='bar'){
        let res = await this.API.getYeildyChartByInverter({
          inverterSn:this.inverterSn,
          siteId:this.siteId,
          firmId:this.firmId,
          wifiSn:this.wifiSn,
          reportType : reportType,
          day : this.day,
          month : this.month,
          year : this.year,
          webTime : this.$options.filters['dateFormat'](new Date(),'YYYY,MM,DD')
        })

        // let resData=[{time: 11, feedinenergy: 0, consumeenergy: 0.5, epsEnergy: 0.2, yieldtoday: 0.4}];//数据
        let resData=res.returnList;//数据
        let maxTick=res.max;//最大刻度

        let xAxisData=[],yeildData=[],EPSData=[]
        let array_data1=[],array_data2=[];
        let theMax1=0,theMax2=0,theMax3=0,theMax4=0;//最大值
        let _this=this;
        let unit_time='';

        if(resData!=null && resData.length>0){
          resData.forEach(item=>{
            array_data1.push(item.yieldtoday<0?0:item.yieldtoday);
            array_data2.push(item.feedinenergy<0?0:item.feedinenergy);
          })
          theMax1=(this.$options.filters['MaxNum'](array_data1)/10000).toFixed(2);
          theMax2=(this.$options.filters['MaxNum'](array_data2)/10000).toFixed(2);
        }
        
        let dataLength=0
        //根据日期类型初始化数据
        if(reportType==1){
          unit_time=this.$t('index.unitTimeHour');
          let hour=23;
          for(let i=0;i<=hour;i++){
            this.forEachYield(resData,i,xAxisData,yeildData,EPSData);
          }
        }else if(reportType==2){
          unit_time=this.$t('index.unitTimeDay');
          for(let i=1;i<=this.dayList;i++){
            this.forEachYield(resData,i,xAxisData,yeildData,EPSData);
          }
        }else if(reportType==3){
          unit_time=this.$t('index.unitTimeMonth');
          for(let i=1;i<=12;i++){
            this.forEachYield(resData,i,xAxisData,yeildData,EPSData);
          }
        }else if(reportType==4){
          unit_time=this.$t('index.unitTimeYear');
          let temp;
          for(var i=0; i < resData.length; i++){
            for(var j=0; j < resData.length-i-1; j++){
              if(resData[j].time>resData[j+1].time){
                temp=resData[j];
                resData[j]=resData[j+1];
                resData[j+1]=temp;
              }
            }             
          }

          resData.forEach(item=>{
            xAxisData.push(item.time);
            if(item.yieldtoday!=null){
              if(item.yieldtoday<=0){
                yeildData.push(0.00);
              }else{
                yeildData.push(item.yieldtoday.toFixed(2));
              }
            }else{
              yeildData.push('-');
            }

            if(item.epsEnergy!=null){
              if(item.epsEnergy<=0){
                EPSData.push(0.00);
              }else{
                EPSData.push(item.epsEnergy.toFixed(2));
              }
            }else{
              EPSData.push('-');
            }
          })
        }

        let onGridYeild = this.ifEPS ?this.$t('onGridYeild'):this.$t('index.total')
        let offGridYeild = this.ifEPS ?this.$t('offGridYeild'):this.$t('device.inverter_EPS_Energy')

        let legendData = [{name: onGridYeild, icon:'stack'}]
        let seriesData = [this.EchartsUtil.getSeries({type:'bar', name:onGridYeild, barMaxWidth:20, stack:'one', color:'#6DA719', data:yeildData})]
        if(this.epsStatus != 0){
          legendData.push({name: offGridYeild, icon:'stack'})
          seriesData.push(this.EchartsUtil.getSeries({type:'bar', name: offGridYeild, barMaxWidth:20, stack:'one', color:'#A27612', data:EPSData}))
        }

        let optionObj={
          tooltip:{
            formatter: function (params) {
              if(params.length==0) return ""
              var text = _this.$options.filters['formatUnitTime'](unit_time,params[0]['axisValue'])+'<br>';
              if(params.length>0){
                var params1=params[0]['data']=='-'?'-':parseFloat(params[0].data).toFixed(2);
                if(params1==theMax1){params1='0.00'};
                text += params[0]['seriesName']+' : '+params1+'kWh<br>';
              }
              if(params.length>1){
                var params2=params[1]['data']=='-'?'-':parseFloat(params[1].data).toFixed(2);
                if(params2==theMax2){params2='0.00'}
                text += params[1]['seriesName']+' : '+params2+'kWh<br>';
              }
              return text;
            }
          },
          legend:{
            // data:legendData
          },
          xAxis:{
            name:'('+unit_time+')',
            data : xAxisData
          },
          yAxis:{
            name:'kWh'
          },
          grid : {
            left : '15px',
            top : '50px',
            right : '70px',
            bottom : '40px',
            containLabel :true
          },
          series : seriesData
        };
        this.yieldBarChart.setOption(this.EchartsUtil.getOption(optionObj));
      }

    },
    //功率曲线
    async initPowerChart(){
      let res = await this.API.getPowerByInverter({
        userId:this.userId,
        firmId:this.firmId,
        inverterSn:this.inverterSn,
        time: this.powerChartDate
      })
      let colorArray=['#f4b600','#72BC38','#A27612','#ffd712','#00f3ff'];

      let times1=[],times2=[],times3=[],times6=[],times7=[];
      res.forEach(item=>{
        let powerdc=0;
        for(let i=1;i<this.pvTypeCountData.pvCount+1;i++){
          if(item['powerdc'+i]){
            powerdc += item['powerdc'+i];
          }
        }
        
        if(this.pvTypeCountData.pvCount!=0){
          times1.push(powerdc);//pv功率
        }
        times2.push(item.gridpower);//AC功率
        times3.push(item.epspower);//ESP功率
        if(this.pvTypeCountData.battery == 1){
          times6.push(item.batPower1);//电池功率
          times7.push(item.batteryCapacity);//电池SOC
        }
      })
      let seriesArray=[]
      
      let setSeries=(name,data,yAxisIndex)=>{
        let res={
            name: name,
            type: 'line',
            symbol: 'none',
            smooth : true,
            lineStyle:{
              width:1
            },
            areaStyle: {
              opacity:0.3
            },
            data:data
        }
        if (yAxisIndex) res.yAxisIndex = yAxisIndex
        return res
      }
      //pv功率
      if(this.pvTypeCountData.pvCount!=0){
        seriesArray.push( setSeries( this.$t('index.solarPower'), times1) )
      }

      //并网AC功率
      seriesArray.push( setSeries( this.ifEPS == 1?this.$t('index.outPutPower2'):this.$t('index.outPutPower'), times2) )

      //离网EPS功率
      if(this.epsStatus != 0){
        seriesArray.push( setSeries( this.$t('load.EPSPower'), times3) )
      }

      //电池功率和电池SOC
      if(this.pvTypeCountData.battery == 1){
        seriesArray.push( setSeries( this.$t('batteryAnalysis.batPower'), times6) )
        seriesArray.push( setSeries( this.$t('Battery_SoC'), times7,1) )
      }
      
      var option = {
          color:colorArray,
          tooltip: {
              trigger: 'axis',
              formatter:(params => {
                let str = `${params[0]['axisValueLabel']}<br>`
                params.forEach(item => {
                  let unit = 'W'
                  if(item.seriesName == this.$t('load.EPSPower')) unit = 'VA'
                  else if(item.seriesName == this.$t('Battery_SoC')) unit = '%'
                  str = `${str}${item.marker}${item.seriesName}: ${item.value}${unit}<br>`
                })
                return str
              })
          },
          legend: {
            show : true,
            itemGap : 10,// 间距
            y : 'bottom',
            textStyle : {
              color : '#68676C',
              fontSize : 12
            },
            selected:{}
          },
          grid : {
            left : '15px',
            top : '50px',
            right : '40px',
            bottom : '40px',
            containLabel :true
          },
          xAxis: {
              type: 'category',
              nameTextStyle:{
                color : '#68676C',
                fontSize:11
              },
              axisLine: {
                onZero: false,
                lineStyle:{
                  width:0
                }
              },
              axisTick : {
                inside : false
              },
              splitLine: {
                  show: false
              },
              // interval: 3600,
              data: res.map(item=>{
                  return  item.uploadTimeValue.slice(11,16)
              })
          },
          yAxis: [{
              type: 'value',
              nameTextStyle: {
                color: '#777',
                fontSize: 12,
              },
              axisLine : {
                show : false
              },
              axisTick : {
                show : false
              },
              splitLine : {
                show : true,
                lineStyle : {
                  color : [ '#dbdbdc' ]
                }
              },
              axisLabel : {
                formatter: '{value} W',
                textStyle : {
                  color : '#68676C'
                }
              }
          },
          {
            type : 'value',
            inverse: false,
            // interval : 1,//强制设置坐标轴分割间隔。
            axisLine : {
              show : false
            },
            axisTick : {
              show : false
            },
            splitLine : {
              show : false
            },
            position: 'right',
            axisLabel : {
              formatter: '{value} %',
              textStyle : {
                color : '#68676C'
              }
            }
          }],
          dataZoom: [{
              type: 'inside'
          }],
          series: seriesArray
      };

      this.$set( option.legend.selected,this.$t('batteryAnalysis.batPower'),this.batPower1Flag=='0'?false:true)
      this.$set( option.legend.selected,this.$t('Battery_SoC'),this.batteryCapacityFlag=='0'?false:true)

      //清空画布，防止缓存
      this.powerChart.clear();
      //使用刚指定的配置项和数据显示图表。
      this.powerChart.setOption(option,true);
      let echartThat = this
      this.powerChart.on('legendselectchanged', function(params) {
        if(params.selected[echartThat.$t('batteryAnalysis.batPower')]){
          localStorage.setItem('batPower1FlagInv','1')
        }else{
          localStorage.setItem('batPower1FlagInv','0')
        }
        if(params.selected[echartThat.$t('Battery_SoC')]){
          localStorage.setItem('batteryCapacityFlagInv','1')
        }else{
          localStorage.setItem('batteryCapacityFlagInv','0')
        }
      })
    },
    async getMap(){
      this.UtilsFun.createGoogle()
      let res = await this.API.selectInvMapAddress({
        inverterSn:this.inverterSn
      })
      this.markers=res
      console.log(this.markers)
    },
    //打开地图
    showMap(){
      this.$store.commit('setVisibleBaiduMap',true)
    }
    
  }
}
</script>

<style lang="less">
@color_box_bg:#EFEFEF;
@color_title:#444;
@color_text:#636162;
@color_unit:#636162;
@color_light:#ff8920;
@border_bottom:1px dashed #D1D1D1;
@border_radius:3px;
@color_unit:#8a8a8a;
.overview_inverter{
  .page-title{
    padding: 10px 0 0 10px;
    color: @color_title;
    font-size: 14px;
    span{
      color: @color_light;
    }
  }
  .prompt{
    color: @color_light;
    font-size: 25px;
    margin: 0 20px;
  }
  .flex-container{
    display:-webkit-flex;
    display: flex;

    .flex-item{
      margin: 10px;
      flex:1;
      background:#fff;
      box-shadow: 0px 0px 5px rgba(0,0,0,.2);
      // background:@color_box_bg;
      border-radius: @border_radius;
      .title{
        padding: 0 10px;
        height: 40px;
        line-height: 40px;
        border-bottom: @border_bottom;
        color: @color_title;
      }

      &.box-realTime{
        padding-top:10px;
      }

      &.sun-box{
        .sun-wrap{
          max-width:420px;
          margin:0 auto;
          color: @color_text;
          .inner .wrap{
            padding:5px 0px;
            text-align: center;
            >*{
              vertical-align: middle;
            }
            label{
              font-size: 14px;
              color: @color_text;
              padding-right: 5px;
            }
            .value{
              font-size:18px;
              color: @color_light;
            }
            .unit{
              font-size: 12px;
              color: @color_unit;
              margin-left:3px ;
            }
            img{
              padding-right: 5px;
              width: 18px;
            }
          }

          .sun-box-pix{
              position: relative;
              height: 200px;
          }
          .sun-gif{
              position: absolute;
              width: 100%;
              overflow: hidden;
              bottom: 0px;
          }

          .sun-rotate{
              position: absolute;
              top: 0px;
              left: 0px;
              transition: 1s;
          }
          .weather-box{
            padding:0 !important;
            width:34%;
            float:left;
            text-align:center;
          }
          .weather-box .weather-info-data{
            font-size: 16px;
            line-height: 70px;
          }
          .inner.no-data span{
            display: block;
            font-size: 14px;
            margin-top: 40px;
            line-height: 25px;
          }
          .weather-info-temperature{
            font-size: 16px;
          }
          .weather-pic-box{
            width: 70px;
            display: block;
            margin: 0 auto;
          }
          .sun-time-day{
            font-size: 12px;
          }
        }
      }

      &.box-power{
        display: flex;
        flex-direction: column;
        .row{
          flex: 1;
          display: flex;
          flex-direction: row;
          align-items: center;
          border-right: 1px solid#DCDCDC;
          &:last-child{
            border-bottom: 1px solid #DCDCDC;
          }
          .col{
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            border-left: 1px solid#DCDCDC;
            border-top: 1px solid#DCDCDC;
            .img{
              margin: 0px auto;
              width: 40px;
              height: 40px;
              background: url(../../assets/img/overview/icons_power.png) no-repeat;
              &.icon1{
                background-position: 0 0;
              }
              &.icon2{
                background-position: 0 -45px;
              }
              &.icon3{
                background-position: 0 -90px;
              }
              &.icon4{
                background-position: 0 -135px;
              }
              >img{
                height:50px;
              }
            }
            .title{
              color: @color_title;
              border-bottom: @border_bottom;
              padding: 6px;
            }
            .text{
              padding: 3px 0;
              text-align: center;
              .value{
                font-size: 20px;
                color: @color_light;  
              }
              .unit{
                font-size: 12px;
                color: @color_unit;
                margin-left:3px ;
              }
            }
            p{
              margin: 0;
              color: @color_text;
              font-size: 14px;
            }
          }
        }

      }
      &.box-power-bar{
        position: relative;
        .title{
          >.el-select {
            margin-left:10px;
          }
        }
        .chartBtnWrap{
          float: right;
          li{
            float: left;
            padding-left: 15px;
            cursor: pointer;
            .iconfont{
              font-size: 20px;
              color: @color_unit;
            }
            &.active{
              .iconfont{
                color:@color_light;
              }
            }
          }
        }
        .right-box-radio{
          position: absolute;
          right: 20px;
          z-index: 3;
        }
        
        .wrap-chart{
          position: relative;
        }
        .wrap-pie{
          >div{
            float: left;
            width: 50%;
            &[echart]{
              height: 280px;
            }
            &.info{
              text-align: center;
              color: @color_text;
              font-size: 14px;
              .value{
                color: @color_light;
              }
            }
          }
        }
        .wrap-pie,.wrap-bar{
          position: absolute;
          width: 100%;
          height: max-content;
          top: 0;
          left: 0;
          background: #fff;
          visibility: hidden;
          &.active{
            visibility:visible;
          }
        }

      }
      &.box-info{
        .moduleInfo {
          display: -webkit-flex;
          display: flex;
          padding-top: 40px;
          height: 249px;
          justify-content:center;
          font-size:14px;
        }
        .moduleInfo li{
          // display:none;
          width:50%;
          text-align:center;
        }
        .moduleInfo li>div.wrap{
          position:relative;
          height: 50%;
        }
        .moduleInfo p{
          line-height:25px;
        }
        .moduleInfo p .value{
          color: #fc8920;
            font-size: 16px;
        }
        .moduleInfo p .unit{
          padding-left:2px;
          color: #8a8a8a;
            font-size: 12px;
        }
        .bmsCapation {
          position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            margin-top: -9px;
            font-size: 20px;
            color: #2b6500;
        }
        .moduleInfo li img{
          width:150px;
        }
        .batteryStatus{
            margin: 2px 0;
          display: inline-block;
            width: 16px;
            height: 16px;
            vertical-align: text-top;
            border-radius: 50%;
        }
        .batteryStatus.gray{
          background:#999;
          background-image: radial-gradient(circle, #d0d0d0,#757575);
        }
        .batteryStatus.red{
          background:#f00;
          background-image: radial-gradient(circle, #ffb887,#f00);
        }
        .batteryStatus.green{
          background:#0f0;
          background-image: radial-gradient(circle, #a8fb38,#00a012);
        }

        .moduleInfo li div.battery{
          padding:4px 18px 4px 4px;
          position:relative;
          width: 150px;
            height: 71px;
          left: 50%;
            margin-left: -75px;
            background: url(../../assets/img/overview/battery-bg.png);
            background-size: cover;
        }
        #batteryShow div.wrap{
          padding-top: 3%;
        }
        .bmsRer{
            height: 100%;
            width: 0;
            transition:.5s;
            background: #71d414;
          background: linear-gradient(45deg, #5bb900, #8cef2e);
            border-radius: 6px;
        }
        .icon-battery{
          display:none;
            position: absolute;
            top: 50%;
            right: 12%;
            width: 20px;
            height: 40px;
            transform: translateY(-50%);
            background-image: url(../../assets/img/overview/icon-charge.png);
            background-repeat:no-repeat;
            background-size:40px 40px;
          background-position:0 0;
        }
        .icon-battery.charge,.icon-battery.discharge{
          display:block;
        }
        .icon-battery.discharge{
          background-position:-20px 0;
        }
      }
      .el-button--primary {
        color: #6d6d6d;
        background-color: #ffffff;
        border-color: #f4b600;
      }
    }

    .time-group{
      float: right;
      .el-input{
        width: 150px;
      }
      button{
        background: #fff;
        border:none;
        &:focus {
          outline: none;
        }
        &:not(:disabled):hover{
          cursor: pointer;
          color: @color_light;
        }
        i{
          line-height: 24px;
          font-weight: bold;
          font-size: 14px;
          
        }
      }
    }

  }
}
</style>